<template>
  <div class="header">
    <div class="searchInput">
      <div class="innerPut">
        <el-input
          v-model="codeContext"
          placeholder="码内容"
          @change="getPlaceGlassByCode"
          size="mini"
          autofocus
          clearable
        ></el-input>
      </div>
      <div class="btnList">
        <el-button type="primary" size="mini" @click="getPlaceGlassByCode"
          >查询</el-button
        >
      </div>
    </div>
    <div
      class="glassInfo"
      v-for="data in showData"
      :key="data.id"
      @click="gotoRoute(data)"
    >
      <div
        class="text"
        :class="{ 'special-color': data.optCodeContext == codeContext }"
      >
        玻璃信息
        <el-button
          type="danger"
          size="mini"
          @click.stop="handleDelete(data.id)"
          style="float: right"
          >报损</el-button
        >
      </div>
      <div class="item">
        <div class="title">玻璃ID</div>
        <div class="value">
          {{ data.id }}
        </div>
      </div>
      <div class="item">
        <div class="title">尺寸</div>
        <div class="value">{{ data.width }}mm * {{ data.height }}mm</div>
      </div>
      <div class="item">
        <div class="title">笼号</div>
        <div class="value">{{ data.gridGroup }}</div>
      </div>
      <div class="item">
        <div class="title">格号</div>
        <div class="value">{{ data.grid }}</div>
      </div>
      <div class="item">
        <div class="title">玻璃类型</div>
        <div class="value">{{ data.type }}</div>
      </div>
      <div class="item">
        <div class="title">识别码</div>
        <div class="value">
          {{ data.optCodeContext }}
        </div>
      </div>
      <div class="item">
        <div class="title">位置</div>
        <div
          class="value"
          @click="handlerGoToSignal(data)"
          :style="{ textDecoration: 'underline', color: 'blue' }"
        >
          <dict-tag
            :options="dict.type.quartz_common_location"
            :value="data.place"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">完成时间</div>
        <div class="value">{{ data.updateTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGlassListPDA } from "@/api/production/pda";

import mixin from "@/views/production/device/mixin/index";
import { abnormal } from "@/api/production/quartz";
export default {
  name: "pda",
  mixins: [mixin],
  dicts: [
    "quartz_glass_state",
    "quartz_common_location_search",
    "quartz_common_location",
  ],
  data() {
    return {
      timer: null,
      activeN: 0,
      activeT: 0,
      active: 1,
      codeContext: "",
      glassData: [],
      signalData: [],
      tableName: [
        {
          value: 1,
          name: "清洗后",
          data: stageTypeList,
        },
        {
          value: 2,
          name: "小车",
          data: cat,
        },
        {
          value: 3,
          name: "钢化前",
          data: shardTypeList,
        },
      ],
    };
  },

  mounted() {},
  destroyed() {
    clearInterval(this.timer);
  },
  watch: {},

  methods: {
    gotoRoute(data) {
      this.$router.push({
        name: "OtherGlass",
        query: { place: data.place, optCodeContext: data.optCodeContext },
      });
    },
    handlerGoToSignal(e) {
      this.$router.push({ name: "Signal", query: { place: e.place } });
    },
    getPlaceGlassByCode() {
      if (this.codeContext == null || this.codeContext == "") {
        this.$message({
          type: "error",
          message: "码内容不能为空",
        });
        return;
      }

      getGlassListPDA({ codeContext: this.codeContext }).then((res) => {
        this.glassData = res.data;
      });
    },
    handleDelete(id) {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        customClass: "messBox",
      })
        .then(({ value }) => {
          abnormal(id, 1)
            .then((res) => {
              this.glassData = {};
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((error) => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
  computed: {
    showData() {
      return this.glassData.filter(
        (item) => item.optCodeContext == this.codeContext
      );
    },
  },
};
</script>

<style lang="less" scoped>
.special-color {
  color: green; /* 设置特定颜色 */
}

/deep/ .el-table__cell {
  width: 60px !important;
}

/deep/ .cell {
  font-size: 16px;
  padding: 0 0 !important;
  display: flex !important;
  justify-content: center;
}

.header {
  margin: 10px 0;
  padding: 0 10px;
  overflow: auto;
  .searchInput {
    padding-bottom: 10px;
    display: flex;
    align-items: center;

    .innerPut {
      width: 50%;
    }

    .btnList {
      margin-left: 5px;
    }
  }
  .glassInfo {
    padding: 10px 0;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .item {
      display: flex;
      margin-bottom: 5px;

      .title {
        font-size: 14px;
      }

      .value {
        margin-left: auto;
      }
    }
  }

  .signalList {
    min-height: 200px;

    .tableX {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      .item {
        flex: 1;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #e6e6e6;
      }

      .location {
        display: flex;
      }

      .type {
        flex: 1;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #e6e6e6;
        font-size: 12px;
      }
      .deviceNo {
        flex: 1;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #e6e6e6;
        font-size: 14px;
      }
      .active,
      .activeT,
      .activeN {
        border-bottom: 2px solid blue;
      }
    }
  }
}
</style>